<template>
  <div>
    <el-drawer v-model="drawer" title="属性设置" :direction="direction" :with-header="false" size="800">
      <el-form :model="formInline" :inline="true" class="demo-form-inline" :label-position="direction === 'btt' ? 'right' : 'right'" size="small" v-if="activeCellJson">
        <el-tabs type="border-card" v-model="activeNameTab">
          <el-tab-pane label="基本配置" name="baseSetting">
            <!-- <template v-for="(value, key) in activeCellJson" :key="key">
              <el-form-item :label="columnList[key] ? columnList[key].label : key" v-if="activeCellJson.hasOwnProperty(key)">
                <el-input v-model="activeCellJson[key]" :placeholder="columnList[key] ? columnList[key].label : key" />
              </el-form-item>
            </template> -->
            <el-form-item label="流程名称" v-if="activeCellJson.hasOwnProperty('spiderName')">
              <el-input v-model="activeCellJson['spiderName']" placeholder="流程名称" />
            </el-form-item>

            <el-form-item label="节点名称" v-if="activeCellJson.hasOwnProperty('value')" style="width: 100%">
              <el-input v-model="activeCellJson['value']" placeholder="节点名称" style="width: 100%" />
            </el-form-item>
            <el-form-item label="执行顺序" v-if="activeCellJson.hasOwnProperty('submit-strategy')">
              <el-select v-model="activeCellJson['submit-strategy']" placeholder="Select" style="width: 140px">
                <el-option label="随机" value="random" />
                <el-option label="顺序" value="linked" />
                <el-option label="子优先" value="child" />
                <el-option label="父优先" value="parent" />
              </el-select>
            </el-form-item>
            <el-form-item label="进程数" v-if="activeCellJson.hasOwnProperty('threadCount')">
              <el-input v-model="activeCellJson['threadCount']" placeholder="进程数" />
            </el-form-item>
            <el-form-item label="循环变量" v-if="activeCellJson.hasOwnProperty('loopVariableName')">
              <el-input v-model="activeCellJson['loopVariableName']" placeholder="循环变量" />
              <!-- <code-input v-model="activeCellJson['loopVariableName']"></code-input> -->
              <!-- <MirrorTextArea :content="activeCellJson['loopVariableName']" :grammers="grammers" style="width: 400px; flex-grow: 1"></MirrorTextArea> -->
            </el-form-item>
            <el-form-item label="循环次数" v-if="activeCellJson.hasOwnProperty('loopCount')">
              <!-- <el-input v-model="activeCellJson['loopCount']" placeholder="循环次数" /> -->
              <MirrorTextArea v-model="activeCellJson['loopCount']" :grammers="grammers" style="min-width: 300px"></MirrorTextArea>
            </el-form-item>

            <el-form-item label="流转特性" v-if="activeCellJson.hasOwnProperty('exception-flow')">
              <!-- <el-input v-model="activeCellJson['exception-flow']" placeholder="流转特性" /> -->
              <el-select v-model="activeCellJson['exception-flow']" placeholder="Select" style="width: 140px">
                <el-option label="直接流转" value="0" />
                <el-option label="当出现异常流转" value="1" />
                <el-option label="未出现异常流转" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="传递变量" v-if="activeCellJson.hasOwnProperty('transmit-variable')">
              <el-input v-model="activeCellJson['transmit-variable']" placeholder="传递变量" />
            </el-form-item>
            <el-form-item label="流转条件" v-if="activeCellJson.hasOwnProperty('condition')">
              <!-- <el-input v-model="activeCellJson['condition']" placeholder="流转条件" /> -->
              <MirrorTextArea v-model="activeCellJson['condition']" :grammers="grammers" style="min-width: 300px"></MirrorTextArea>
            </el-form-item>
            <el-form-item label="线粗细" v-if="activeCellJson.hasOwnProperty('lineWidth')">
              <el-input v-model="activeCellJson['lineWidth']" placeholder="线粗细" />
            </el-form-item>
            <el-form-item label="线样式" v-if="activeCellJson.hasOwnProperty('line-style')">
              <!-- <el-input v-model="activeCellJson['line-style']" placeholder="线样式" /> -->
              <el-select v-model="activeCellJson['line-style']" placeholder="Select" style="width: 140px">
                <el-option label="Sharp" value="sharp" />
                <el-option label="Rounded" value="rounded" />
                <el-option label="Curved" value="curved" />
              </el-select>
            </el-form-item>
            <el-form-item label="线颜色" v-if="activeCellJson.hasOwnProperty('lineColor')">
              <el-input v-model="activeCellJson['lineColor']" placeholder="线颜色" />
            </el-form-item>

            <el-form-item v-if="activeCellJson.hasOwnProperty('url')" style="width: 100%">
              <el-input v-model="activeCellJson['url']" placeholder="输入链接" style="width: 100%">
                <template #prepend>
                  <el-select v-model="activeCellJson['method']" placeholder="Select" style="width: 80px">
                    <el-option label="GET" value="GET" />
                    <el-option label="POST" value="POST" />
                    <el-option label="PUT" value="PUT" />
                    <el-option label="DELETE" value="DELETE" />
                    <el-option label="PATCH" value="PATCH" />
                    <el-option label="HEAD" value="HEAD" />
                    <el-option label="OPTIONS" value="OPTIONS" />
                    <el-option label="TRACE" value="TRACE" />
                  </el-select>
                </template>
              </el-input>
            </el-form-item>

            <!-- <el-form-item label="请求方式" v-if="activeCellJson.hasOwnProperty('method')">
              <el-input v-model="activeCellJson['method']" placeholder="循环次数" />
            </el-form-item>
            <el-form-item label="请求地址" v-if="activeCellJson.hasOwnProperty('url')">
              <el-input v-model="activeCellJson['url']" placeholder="请求地址" />
            </el-form-item> -->
            <el-form-item label="延迟时间" v-if="activeCellJson.hasOwnProperty('sleep')">
              <el-input v-model="activeCellJson['sleep']" placeholder="延迟时间" />
            </el-form-item>
            <el-form-item label="超时时间" v-if="activeCellJson.hasOwnProperty('timeout')">
              <el-input v-model="activeCellJson['timeout']" placeholder="超时时间" />
            </el-form-item>
            <el-form-item label="页面编码" v-if="activeCellJson.hasOwnProperty('response-charset')">
              <el-input v-model="activeCellJson['response-charset']" placeholder="页面编码" />
            </el-form-item>
            <el-form-item label="重试次数" v-if="activeCellJson.hasOwnProperty('retryCount')">
              <el-input v-model="activeCellJson['retryCount']" placeholder="重试次数" />
            </el-form-item>
            <el-form-item label="重试间隔" v-if="activeCellJson.hasOwnProperty('retryInterval')">
              <el-input v-model="activeCellJson['retryInterval']" placeholder="重试间隔" />
            </el-form-item>
            <el-form-item label="代理" v-if="activeCellJson.hasOwnProperty('proxy')">
              <!-- <el-input v-model="activeCellJson['proxy']" placeholder="代理" /> -->
              <MirrorTextArea v-model="activeCellJson['proxy']" :grammers="grammers" style="min-width: 300px"></MirrorTextArea>
            </el-form-item>
            <el-form-item label="请求设置" v-if="activeCellJson.hasOwnProperty('url')">
              <el-checkbox true-value="1" false-value="0" v-model="activeCellJson['follow-redirect']">跟踪重定向</el-checkbox>
              <el-checkbox true-value="1" false-value="0" v-model="activeCellJson['tls-validate']">TLS证书验证</el-checkbox>
              <el-checkbox true-value="1" false-value="0" v-model="activeCellJson['cookie-auto-set']">自动管理Cokie</el-checkbox>
              <el-checkbox true-value="1" false-value="0" v-model="activeCellJson['repeat-enable']">自动去重</el-checkbox>
            </el-form-item>
            <el-form-item label="输出设置" v-if="activeCellJson.hasOwnProperty('output-all')" style="width: 300px">
              <el-checkbox true-value="1" false-value="0" v-model="activeCellJson['output-all']">输出全部参数</el-checkbox>
            </el-form-item>
            <el-form-item label="输出方式" v-if="activeCellJson.hasOwnProperty('output-database') || activeCellJson.hasOwnProperty('output-csv') || activeCellJson.hasOwnProperty('output-api')">
              <el-checkbox true-value="1" false-value="0" v-model="activeCellJson['output-database']">输出到数据库</el-checkbox>
              <el-checkbox true-value="1" false-value="0" v-model="activeCellJson['output-csv']">输出到CSV</el-checkbox>
              <el-checkbox true-value="1" false-value="0" v-model="activeCellJson['output-api']">输出到API</el-checkbox>
            </el-form-item>
            <el-card style="margin: 10px 0" shadow="never" v-if="(activeCellJson.hasOwnProperty('output-database') && activeCellJson['output-database'] !== '0') || activeCellJson.hasOwnProperty('statementType')">
              <el-form-item label="数据库链接" v-if="activeCellJson.hasOwnProperty('datasourceId')">
                <el-select style="width: 115px" :options="datasourceList" :label="{ label: 'name', value: 'id' }" v-model="activeCellJson['datasourceId']" @change="datasourceIdChange($event)">
                  <el-option v-for="item in datasourceList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="数据库" v-if="activeCellJson.hasOwnProperty('databaseName')">
                <el-select style="width: 115px" :options="databases" :label="{ label: 'catalogName', value: 'catalogName' }" v-model="activeCellJson['databaseName']" @change="databaseNameChange($event)" />
              </el-form-item> -->
              <el-form-item label="输出表" v-if="activeCellJson.hasOwnProperty('tableName')">
                <el-input v-model="activeCellJson['tableName']" placeholder="输出表" />
              </el-form-item>
              <el-form-item label="语句类型" v-if="activeCellJson.hasOwnProperty('statementType')">
                <!-- <el-input v-model="activeCellJson['tableName']" placeholder="语句类型" /> -->
                <el-select v-model="activeCellJson['statementType']" placeholder="语句类型" style="width: 115px">
                  <el-option label="select" value="select" />
                  <el-option label="selectOne" value="selectOne" />
                  <el-option label="selectInt" value="selectInt" />
                  <el-option label="insert" value="insert" />
                  <el-option label="delete" value="delete" />
                  <el-option label="update" value="update" />
                  <el-option label="insertofPk" value="insertofPk" />
                </el-select>
              </el-form-item>
              <el-form-item v-if="activeCellJson.hasOwnProperty('isStream')">
                <!-- <el-input v-model="activeCellJson['isStream']" placeholder="语句类型" /> -->
                <el-checkbox true-value="1" false-value="0" v-model="activeCellJson['isStream']">输出到sqlRowSet流</el-checkbox>
              </el-form-item>
            </el-card>
            <el-form-item label="SQL语句" v-if="activeCellJson.hasOwnProperty('sql')" style="width: 100%" class="content_params">
              <el-input v-model="activeCellJson['sql']" :rows="6" type="textarea" placeholder="SQL" />
            </el-form-item>
            <el-card shadow="never" v-if="activeCellJson.hasOwnProperty('output-csv') && activeCellJson['output-csv'] === '1'">
              <el-form-item label="编码">
                <el-select style="width: 115px" @change="datasourceIdChange($event)">
                  <el-option label="GBK" value="GBK" />
                  <el-option label="UTF8" value="UTF8" />
                </el-select>
              </el-form-item>
              <el-form-item label="CSV文件名" v-if="activeCellJson.hasOwnProperty('csvName')">
                <el-input v-model="activeCellJson['csvName']" placeholder="CSV文件名" />
              </el-form-item>
            </el-card>
            <el-form-item v-if="activeCellJson.hasOwnProperty('output-name')" style="width: 100%">
              <table>
                <tr>
                  <!-- <th></th>
                  <th></th> -->
                  <th style="max-width: 100px">参数名</th>
                  <th>参数值</th>
                  <th>参数描述</th>
                  <th>操作</th>
                </tr>
                <tr v-for="(item, index) in activeCellJson['output-name']" :key="index">
                  <!-- <td style="text-align: center; width: 30px"><SvgIcon name="drag"></SvgIcon></td>
                  <td style="width: 40px; text-align: center">
                    <el-checkbox true-value="1" false-value="0" v-model="activeCellJson['output-check'][index]" />
                  </td> -->
                  <td style="max-width: 100px"><el-input style="width: 100%" type="text" v-model="activeCellJson['output-name'][index]" /></td>
                  <td>
                    <MirrorTextArea v-model="activeCellJson['output-value'][index]" :grammers="grammers"></MirrorTextArea>
                    <!-- <el-input type="text" v-model="activeCellJson['output-value'][index]" /> -->
                  </td>
                  <td style="width: 120px"><el-input type="text" v-model="activeCellJson['output-description'][index]" /></td>
                  <td style="width: 120px">
                    <el-button-group class="ml-4" size="small">
                      <el-button type="" :icon="Top" :disabled="index == 0" @click="clickUpOutputParam(index)" />
                      <el-button type="" :icon="Bottom" :disabled="index == activeCellJson['output-name'].length - 1" @click="clickDownOutputParam(index)" />
                      <el-button type="" :icon="Delete" @click="deleteOutputParam(index)" />
                    </el-button-group>
                  </td>
                </tr>
              </table>
              <el-button type="primary" style="width: 100%" :icon="Plus" @click="addOutputParam()">增加参数</el-button>
            </el-form-item>
            <el-form-item v-if="activeCellJson.hasOwnProperty('variable-name')" style="width: 100%" class="content_params">
              <table>
                <tr>
                  <th>参数名</th>
                  <th>参数值</th>
                  <th>参数描述</th>
                  <th>操作</th>
                </tr>
                <tr v-for="(item, index) in activeCellJson['variable-name']" :key="index">
                  <!-- <td style="text-align: center; width: 30px"><SvgIcon name="drag"></SvgIcon></td> -->
                  <!-- <td style="width: 40px; text-align: center">
                    <el-checkbox true-value="1" false-value="0" v-model="activeCellJson['variable-check'][index]" />
                  </td> -->
                  <td style="width: 150px"><el-input type="text" v-model="activeCellJson['variable-name'][index]" /></td>
                  <td>
                    <!-- <el-input type="text" v-model="activeCellJson['variable-value'][index]" /> -->
                    <MirrorTextArea v-model="activeCellJson['variable-value'][index]" :grammers="grammers"></MirrorTextArea>
                  </td>
                  <td><el-input type="text" v-model="activeCellJson['variable-description'][index]" /></td>
                  <td style="width: 120px">
                    <el-button-group class="ml-4" size="small">
                      <el-button type="" :icon="Top" :disabled="index == 0" @click="clickUpVariableParam(index)" />
                      <el-button type="" :icon="Bottom" :disabled="index == activeCellJson['variable-name'].length - 1" @click="clickDownVariableParam(index)" />
                      <el-button type="" :icon="Delete" @click="deleteVariableParam(index)" />
                    </el-button-group>
                  </td>
                </tr>
              </table>
              <el-button type="primary" style="width: 100%" :icon="Plus" @click="addVariableParam()">增加参数</el-button>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="参数" v-if="activeCellJson.hasOwnProperty('parameter-name')" name="parameter">
            <el-form-item v-if="activeCellJson.hasOwnProperty('parameter-name')" style="width: 100%" class="content_params">
              <table>
                <tr>
                  <th>参数名</th>
                  <th>参数值</th>
                  <th>参数描述</th>
                  <th>操作</th>
                </tr>
                <tr v-for="(item, index) in activeCellJson['parameter-name']" :key="index">
                  <!-- <td style="text-align: center; width: 30px"><SvgIcon name="drag"></SvgIcon></td> -->
                  <!-- <td style="width: 40px; text-align: center">
                    <el-checkbox true-value="1" false-value="0" v-model="activeCellJson['variable-check'][index]" />
                  </td> -->
                  <td style="width: 150px"><el-input type="text" v-model="activeCellJson['parameter-name'][index]" /></td>
                  <td>
                    <!-- <el-input type="text" v-model="activeCellJson['parameter-value'][index]" /> -->
                    <MirrorTextArea v-model="activeCellJson['parameter-value'][index]" :grammers="grammers"></MirrorTextArea>
                  </td>
                  <td><el-input type="text" v-model="activeCellJson['parameter-description'][index]" /></td>
                  <td style="width: 120px">
                    <el-button-group class="ml-4" size="small">
                      <el-button type="" :icon="Top" :disabled="index == 0" @click="clickUpParameter(index)" />
                      <el-button type="" :icon="Bottom" :disabled="index == activeCellJson['parameter-name'].length - 1" @click="clickDownParameter(index)" />
                      <el-button type="" :icon="Delete" @click="deleteParameter(index)" />
                    </el-button-group>
                  </td>
                </tr>
              </table>
              <el-button type="primary" style="width: 100%" :icon="Plus" @click="addParameter()">增加参数</el-button>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="cookie" v-if="activeCellJson.hasOwnProperty('cookie-name')" name="cookie">
            <el-form-item v-if="activeCellJson.hasOwnProperty('cookie-name')" style="width: 100%" class="content_params">
              <table>
                <tr>
                  <th>cookie名</th>
                  <th>cookie值</th>
                  <th>描述</th>
                  <th>操作</th>
                </tr>
                <tr v-for="(item, index) in activeCellJson['cookie-name']" :key="index">
                  <!-- <td style="text-align: center; width: 30px"><SvgIcon name="drag"></SvgIcon></td> -->
                  <!-- <td style="width: 40px; text-align: center">
                    <el-checkbox true-value="1" false-value="0" v-model="activeCellJson['variable-check'][index]" />
                  </td> -->
                  <td style="width: 150px"><el-input type="text" v-model="activeCellJson['cookie-name'][index]" /></td>
                  <td>
                    <MirrorTextArea v-model="activeCellJson['cookie-value'][index]" :grammers="grammers"></MirrorTextArea>
                    <!-- <el-input type="text" v-model="activeCellJson['cookie-value'][index]" /> -->
                  </td>
                  <td><el-input type="text" v-model="activeCellJson['cookie-description'][index]" /></td>
                  <td style="width: 120px">
                    <el-button-group class="ml-4" size="small">
                      <el-button type="" :icon="Top" :disabled="index == 0" @click="clickUpCookie(index)" />
                      <el-button type="" :icon="Bottom" :disabled="index == activeCellJson['cookie-name'].length - 1" @click="clickDownCookie(index)" />
                      <el-button type="" :icon="Delete" @click="deleteCookie(index)" />
                    </el-button-group>
                  </td>
                </tr>
              </table>
              <el-button type="primary" style="width: 100%" :icon="Plus" @click="addCookie()">增加参数</el-button>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="Header" v-if="activeCellJson.hasOwnProperty('header-name')" name="header">
            <el-form-item v-if="activeCellJson.hasOwnProperty('header-name')" style="width: 100%" class="content_params">
              <table>
                <tr>
                  <th>header名</th>
                  <th>header值</th>
                  <th>描述</th>
                  <th>操作</th>
                </tr>
                <tr v-for="(item, index) in activeCellJson['header-name']" :key="index">
                  <!-- <td style="text-align: center; width: 30px"><SvgIcon name="drag"></SvgIcon></td> -->
                  <!-- <td style="width: 40px; text-align: center">
                    <el-checkbox true-value="1" false-value="0" v-model="activeCellJson['variable-check'][index]" />
                  </td> -->
                  <td style="width: 150px"><el-input type="text" v-model="activeCellJson['header-name'][index]" /></td>
                  <td>
                    <MirrorTextArea v-model="activeCellJson['header-value'][index]" :grammers="grammers"></MirrorTextArea>
                    <!-- <el-input type="text" v-model="activeCellJson['header-value'][index]" /> -->
                  </td>
                  <td><el-input type="text" v-model="activeCellJson['header-description'][index]" /></td>
                  <td style="width: 120px">
                    <el-button-group class="ml-4" size="small">
                      <el-button type="" :icon="Top" :disabled="index == 0" @click="clickUpHeader(index)" />
                      <el-button type="" :icon="Bottom" :disabled="index == activeCellJson['header-name'].length - 1" @click="clickDownHeader(index)" />
                      <el-button type="" :icon="Delete" @click="deleteHeader(index)" />
                    </el-button-group>
                  </td>
                </tr>
              </table>
              <el-button type="primary" style="width: 100%" :icon="Plus" @click="addHeader()">增加参数</el-button>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="body" v-if="activeCellJson.hasOwnProperty('body-type')" name="body">
            <el-form-item label="类型" style="width: 100%">
              <el-select v-model="activeCellJson['body-type']" placeholder="Select">
                <el-option label="none" value="none" />
                <el-option label="form-data" value="form-data" />
                <el-option label="raw" value="raw" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="activeCellJson.hasOwnProperty('body-type') && activeCellJson['body-type'] === 'form-data' && activeCellJson.hasOwnProperty('parameter-form-name')" style="width: 100%" class="content_params">
              <table>
                <tr>
                  <th>参数名</th>
                  <th>参数类型</th>
                  <th>值</th>
                  <th>参数描述</th>
                  <th>操作</th>
                </tr>
                <tr v-for="(item, index) in activeCellJson['parameter-form-name']" :key="index">
                  <!-- <td style="text-align: center; width: 30px"><SvgIcon name="drag"></SvgIcon></td> -->
                  <!-- <td style="width: 40px; text-align: center">
                    <el-checkbox true-value="1" false-value="0" v-model="activeCellJson['variable-check'][index]" />
                  </td> -->
                  <td style="width: 150px"><el-input type="text" v-model="activeCellJson['parameter-form-name'][index]" /></td>
                  <td style="width: 80px">
                    <el-select v-model="activeCellJson['parameter-form-type'][index]" placeholder="Select">
                      <el-option label="text" value="text" />
                      <el-option label="file" value="file" />
                    </el-select>
                  </td>
                  <td v-if="activeCellJson['parameter-form-type'][index] && activeCellJson['parameter-form-type'][index] === 'file'"><el-input type="file" v-model="activeCellJson['parameter-form-filename'][index]" /></td>
                  <td v-else>
                    <!-- <el-input type="text" v-model="activeCellJson['parameter-form-value'][index]" /> -->
                    <MirrorTextArea v-model="activeCellJson['parameter-form-value'][index]" :grammers="grammers"></MirrorTextArea>
                  </td>
                  <td><el-input type="text" v-model="activeCellJson['parameter-form-description'][index]" /></td>
                  <td style="width: 120px">
                    <el-button-group class="ml-4" size="small">
                      <el-button type="" :icon="Top" :disabled="index == 0" @click="clickUpParameterForm(index)" />
                      <el-button type="" :icon="Bottom" :disabled="index == activeCellJson['parameter-form-name'].length - 1" @click="clickDownParameterForm(index)" />
                      <el-button type="" :icon="Delete" @click="deleteParameterForm(index)" />
                    </el-button-group>
                  </td>
                </tr>
              </table>
              <el-button type="primary" style="width: 100%" :icon="Plus" @click="addParameterForm()">增加参数</el-button>
            </el-form-item>
            <el-form-item label="content-type" v-if="activeCellJson.hasOwnProperty('body-type') && activeCellJson['body-type'] === 'raw' && activeCellJson.hasOwnProperty('body-content-type')" style="width: 100%" class="content_params">
              <el-select v-model="activeCellJson['body-content-type']" placeholder="Select">
                <el-option label="text/plain" value="text/plain" />
                <el-option label="application/json" value="application/json" />
              </el-select>
            </el-form-item>
            <el-form-item label="内容" v-if="activeCellJson.hasOwnProperty('body-type') && activeCellJson['body-type'] === 'raw' && activeCellJson.hasOwnProperty('request-body')" style="width: 100%" class="content_params">
              <!-- <el-input v-model="activeCellJson['request-body']" :rows="6" type="textarea" placeholder="body内容" /> -->
              <MirrorTextArea v-model="activeCellJson['request-body']" :grammers="grammers"></MirrorTextArea>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <template #footer>
        <!-- <svg-icon name="icon-win-top"></svg-icon> -->
        <svg-icon name="icon-win-bottom" @click="changeDirection('btt')"></svg-icon>
        <!-- <svg-icon name="icon-win-left"></svg-icon> -->
        <svg-icon name="icon-win-right" @click="changeDirection('rtl')"></svg-icon>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { onActivated, onMounted, reactive, ref, watch } from "vue";
import { Plus } from "@element-plus/icons-vue";
import SvgIcon from "@/components/base/svg-icon";
import MirrorTextArea from "@/components/code-input/mirrorTextArea.vue";
const emit = defineEmits(["update"]);
import baseService from "@/service/baseService";
const datasourceList: any = ref([]);
const databases = ref();
const drawer = ref(false);
import { Top, Bottom, Delete, Edit, Share } from "@element-plus/icons-vue";
const activeCellJson: any = ref({});
const activeNameTab = ref("baseSetting");
const direction = ref("rtl");
const datasourceIdChange = (val: any) => {
  console.log(val);
};
watch(
  () => activeCellJson.value,
  (New, Old) => {
    // console.log(`新值:${New} ——— 老值:${Old}`);
    emit("update", New);
  },
  { deep: true }
);
const databaseNameChange = (val: any) => {
  console.log(val);
};
const getDatasourceList = () => {
  baseService
    .get("datasource/list", {
      page: 1,
      limit: 200
    })
    .then((res) => {
      datasourceList.value = res.data.records;
    })
    .catch(() => {
      console.error("数据库失败");
    });
};
const addOutputParam = () => {
  // activeCellJson.value["output-check"].push("1");
  activeCellJson.value["output-name"].push("");
  activeCellJson.value["output-value"].push("");
  activeCellJson.value["output-description"].push("");
};
// 上移
const clickUpOutputParam = (index: number) => {
  clickUp(activeCellJson.value["output-value"], index);
  clickUp(activeCellJson.value["output-name"], index);
  clickUp(activeCellJson.value["output-description"], index);
};
// 下移
const clickDownOutputParam = (index: number) => {
  clickDown(activeCellJson.value["output-value"], index);
  clickDown(activeCellJson.value["output-name"], index);
  clickDown(activeCellJson.value["output-description"], index);
};
const deleteOutputParam = (index: number) => {
  deleteHandle(activeCellJson.value["output-value"], index);
  deleteHandle(activeCellJson.value["output-name"], index);
  deleteHandle(activeCellJson.value["output-description"], index);
};

const addVariableParam = () => {
  // activeCellJson.value["variable-check"].push("1");
  activeCellJson.value["variable-name"].push("");
  activeCellJson.value["variable-value"].push("");
  activeCellJson.value["variable-description"].push("");
};
// 上移
const clickUpVariableParam = (index: number) => {
  clickUp(activeCellJson.value["variable-value"], index);
  clickUp(activeCellJson.value["variable-name"], index);
  clickUp(activeCellJson.value["variable-description"], index);
};
// 下移
const clickDownVariableParam = (index: number) => {
  clickDown(activeCellJson.value["variable-value"], index);
  clickDown(activeCellJson.value["variable-name"], index);
  clickDown(activeCellJson.value["variable-description"], index);
};
const deleteVariableParam = (index: number) => {
  deleteHandle(activeCellJson.value["variable-value"], index);
  deleteHandle(activeCellJson.value["variable-name"], index);
  deleteHandle(activeCellJson.value["variable-description"], index);
};

const addParameter = () => {
  // activeCellJson.value["variable-check"].push("1");
  activeCellJson.value["parameter-name"].push("");
  activeCellJson.value["parameter-value"].push("");
  activeCellJson.value["parameter-description"].push("");
};
// 上移
const clickUpParameter = (index: number) => {
  clickUp(activeCellJson.value["parameter-value"], index);
  clickUp(activeCellJson.value["parameter-name"], index);
  clickUp(activeCellJson.value["parameter-description"], index);
};
// 下移
const clickDownParameter = (index: number) => {
  clickDown(activeCellJson.value["parameter-value"], index);
  clickDown(activeCellJson.value["parameter-name"], index);
  clickDown(activeCellJson.value["parameter-description"], index);
};
const deleteParameter = (index: number) => {
  deleteHandle(activeCellJson.value["parameter-value"], index);
  deleteHandle(activeCellJson.value["parameter-name"], index);
  deleteHandle(activeCellJson.value["parameter-description"], index);
};
// ---------------head

const addHeader = () => {
  // activeCellJson.value["header-check"].push("1");
  activeCellJson.value["header-name"].push("");
  activeCellJson.value["header-value"].push("");
  activeCellJson.value["header-description"].push("");
};
// 上移
const clickUpHeader = (index: number) => {
  clickUp(activeCellJson.value["header-value"], index);
  clickUp(activeCellJson.value["header-name"], index);
  clickUp(activeCellJson.value["header-description"], index);
};
// 下移
const clickDownHeader = (index: number) => {
  clickDown(activeCellJson.value["header-value"], index);
  clickDown(activeCellJson.value["header-name"], index);
  clickDown(activeCellJson.value["header-description"], index);
};
const deleteHeader = (index: number) => {
  deleteHandle(activeCellJson.value["header-value"], index);
  deleteHandle(activeCellJson.value["header-name"], index);
  deleteHandle(activeCellJson.value["header-description"], index);
};

// ---------------cookie

const addCookie = () => {
  // activeCellJson.value["variable-check"].push("1");
  activeCellJson.value["cookie-name"].push("");
  activeCellJson.value["cookie-value"].push("");
  activeCellJson.value["cookie-description"].push("");
};
// 上移
const clickUpCookie = (index: number) => {
  clickUp(activeCellJson.value["cookie-value"], index);
  clickUp(activeCellJson.value["cookie-name"], index);
  clickUp(activeCellJson.value["cookie-description"], index);
};
// 下移
const clickDownCookie = (index: number) => {
  clickDown(activeCellJson.value["cookie-value"], index);
  clickDown(activeCellJson.value["cookie-name"], index);
  clickDown(activeCellJson.value["cookie-description"], index);
};
const deleteCookie = (index: number) => {
  deleteHandle(activeCellJson.value["cookie-value"], index);
  deleteHandle(activeCellJson.value["cookie-name"], index);
  deleteHandle(activeCellJson.value["cookie-description"], index);
};

// ---------------parameter-form

const addParameterForm = () => {
  // activeCellJson.value["variable-check"].push("1");
  activeCellJson.value["parameter-form-name"].push("");
  activeCellJson.value["parameter-form-value"].push("");
  activeCellJson.value["parameter-form-description"].push("");
  activeCellJson.value["parameter-form-type"].push("");
  activeCellJson.value["parameter-form-filename"].push("");
};
// 上移
const clickUpParameterForm = (index: number) => {
  clickUp(activeCellJson.value["parameter-form-value"], index);
  clickUp(activeCellJson.value["parameter-form-name"], index);
  clickUp(activeCellJson.value["parameter-form-description"], index);
  clickUp(activeCellJson.value["parameter-form-type"], index);
  clickUp(activeCellJson.value["parameter-form-filename"], index);
};
// 下移
const clickDownParameterForm = (index: number) => {
  clickDown(activeCellJson.value["parameter-form-value"], index);
  clickDown(activeCellJson.value["parameter-form-name"], index);
  clickDown(activeCellJson.value["parameter-form-description"], index);
  clickDown(activeCellJson.value["parameter-form-type"], index);
  clickDown(activeCellJson.value["parameter-form-filename"], index);
};
const deleteParameterForm = (index: number) => {
  deleteHandle(activeCellJson.value["parameter-form-value"], index);
  deleteHandle(activeCellJson.value["parameter-form-name"], index);
  deleteHandle(activeCellJson.value["parameter-form-description"], index);
  deleteHandle(activeCellJson.value["parameter-form-type"], index);
  deleteHandle(activeCellJson.value["parameter-form-filename"], index);
};

const clickUp = (items: any, index: number) => {
  items.splice(index - 1, 1, ...items.splice(index, 1, items[index - 1]));
};
const clickDown = (items: any, index: number) => {
  items.splice(index, 1, ...items.splice(index + 1, 1, items[index]));
};
const deleteHandle = (items: any, index: number) => {
  items.splice(index, 1);
  // items = items.filter(function (item: any, idx: number) {
  //   return idx !== index;
  // });
};
const formInline = reactive({
  user: "",
  region: "",
  date: ""
});
const init = (item: any) => {
  console.log(item);
  drawer.value = true;
  activeNameTab.value = "baseSetting";
  activeCellJson.value = item;
  // eslint-disable-next-line no-prototype-builtins
  // if (item && item.hasOwnProperty("output-database")) {
  getDatasourceList();
  // }

  // console.log(item);
};
const grammers = ref([]);
const getGrammers = () => {
  baseService.get("/spider/grammers").then((res: any) => {
    if (res.code === 0) {
      // analysisData.value = res.data;
      grammers.value = res.data;
      for (var i = 0, len = grammers.value.length; i < len; i++) {
        var grammer: any = grammers.value[i];
        if (grammer && grammer.method && grammer.method.length > 3 && grammer.method.indexOf("get") == 0) {
          grammer.method = grammer.method.substring(3, 4).toLowerCase() + grammer.method.substring(4);
        } else if (grammer && grammer.method) {
          grammer.method = grammer.method + "()";
        }
      }
    }
  });
};
onMounted(() => {
  getGrammers();
});
const onSubmit = () => {
  console.log("submit!");
};
const changeDirection = (val: string) => {
  direction.value = val;
};
defineExpose({
  init
});
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

table caption {
  font-size: 2em;
  font-weight: bold;
  margin: 1em 0;
}

th,
td {
  border: 1px solid #999;
  /* text-align: center; */
  padding: 4px 0;
  min-width: 14px;
}
table tr th {
  background-color: rgba(0, 0, 0, 0.1);
}
table thead tr {
  background-color: #008c8c;
  color: #fff;
}

table tbody tr:nth-child(odd) {
  background-color: #eee;
}

table tbody tr:hover {
  background-color: #ccc;
}

table tbody tr td:first-child {
  color: #f40;
}

table tfoot tr td {
  text-align: right;
  padding-right: 20px;
}
</style>
